<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            html{
                height:100%
            }
            body{
                height:100%;
                margin:0px;
            }
            /*定义了一个样式类*/
            .container{
                width:100%;
                height:100%;
                background-color: #EEEEEE;

                overflow: auto;/*溢出后，如何处理*/

                display: flex;/*启用flex布局*/
                flex-direction: column;/*flex布局，纵向排列*/
                align-items: center;/*水平居中*/
            }
            .card{
                width:95%;
                height:300px;
                background-color: blueviolet;
                margin-top:20px;
                flex:0 0 auto;/*禁止自动缩放*/
            }
        </style>
    </head>
    <body>
        <!--矩形区域-->
        <div class="container">
                <div class="card"></div>
                <div class="card"></div>
                <div class="card"></div>
                <div class="card"></div>
                <div class="card"></div>
                <div class="card"></div>
                <div class="card"></div>
                <div class="card"></div>
                <div class="card"></div>
                <div class="card"></div>
                <div class="card"></div>
        </div>
    </body>
</html>